<template>
  <div>
    <div class="chart-item" v-for="(item, index) in chartData" :key="index">
      <div class="title">
        {{ item.name }}
        <div class="tools">
          <!-- <el-button type="primary" plain size="small" @click="handleBaseLine(index)">柱状图</el-button> -->
          <!-- <el-button type="primary" plain size="small" @click="handleStackLine(index)">堆叠柱状图</el-button> -->
        </div>
      </div>
      <div class="chart">
        <LineChart :chartOption="item.option" />
      </div>
    </div>
    <div class="deep-analysis">
      <div class="chart-item">
        <table style="width: 100%">
          <thead>
            <tr>
              <th :colspan="5">深入分析-效应量指标</th>
            </tr>
            <tr>
              <th>分析项</th>
              <th>SSB(组间差)</th>
              <th>SST(总离差)</th>
              <th>偏Eta方(Partial η2)</th>
              <th>Cohen's f 值</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(item, index) in data.items" :key="index">
              <td>{{ item.name }}</td>
              <td>{{ (item.ssa * 1).toFixed(3) }}</td>
              <td>{{ (item.sst * 1).toFixed(3) }}</td>
              <td>{{ (item.eta * 1).toFixed(3) }}</td>
              <td>{{ (item.cohens_f * 1).toFixed(3) }}</td>
            </tr>
          </tbody>
        </table>
      </div>
      <div class="chart-item">
        <table style="width: 100%">
          <thead>
            <tr>
              <th :colspan="7">方差分析中间过程值</th>
            </tr>
            <tr>
              <th>项</th>
              <th>差异</th>
              <th>平方和</th>
              <th>自由度</th>
              <th>均方</th>
              <th>F</th>
              <th>p 值</th>
            </tr>
          </thead>
          <tbody>
            <template v-for="(item, index) in data.items" :key="index">
              <tr>
                <td :rowspan="3">{{ item.name }}</td>
                <td>组间</td>
                <td>{{ (item.holder.ssa * 1).toFixed(3) }}</td>
                <td>{{ item.holder.df1 }}</td>
                <td>{{ (item.holder.msa * 1).toFixed(3) }}</td>

                <td>{{ (item.fValue * 1).toFixed(3) }}</td>
                <td>{{ (item.pValue * 1).toFixed(3) }}</td>
              </tr>
              <tr>
                <td>组内</td>
                <td>{{ (item.holder.ssw * 1).toFixed(3) }}</td>
                <td>{{ item.holder.df2 }}</td>
                <td>{{ (item.holder.msw * 1).toFixed(3) }}</td>
                <td></td>
                <td></td>
              </tr>
              <tr>
                <td>总计</td>
                <td>{{ (item.holder.sst * 1).toFixed(3) }}</td>
                <td>{{ item.holder.df1 * 1 + item.holder.df2 * 1 }}</td>
                <td></td>
                <td></td>
                <td></td>
              </tr>
            </template>
          </tbody>
        </table>
      </div>
      <div class="chart-item">
        <table style="width: 100%">
          <thead>
            <tr>
              <th :colspan="7">方差分析结果(普通格式)</th>
            </tr>
            <tr>
              <th>分析项</th>
              <th>项</th>
              <th>样本量</th>
              <th>平均值</th>
              <th>标准差</th>
              <th>F</th>
              <th>p</th>
            </tr>
          </thead>
          <tbody>
            <template v-for="(item, index) in data.items" :key="index">
              <tr v-for="i in data.options.length + 1" :key="i">
                <td v-if="i == 1" :rowspan="data.options.length + 1">{{ item.name }}</td>
                <td v-if="i != data.options.length + 1">{{ data.options[i - 1].optionDesc }}</td>
                <td v-else>总计</td>
                <td v-if="i != data.options.length + 1">{{ data.options[i - 1].frequency }}</td>
                <td v-else>
                  {{ item.holder.count }}
                </td>
                <td v-if="i != data.options.length + 1">
                  {{ (item.avgs[i - 1] * 1).toFixed(3) }}
                </td>
                <td v-else>{{ (item.holder.mean * 1).toFixed(3) }}</td>
                <td v-if="i != data.options.length + 1">
                  {{ (item.stds[i - 1] * 1).toFixed(3) }}
                </td>
                <td v-else>{{ (item.holder.std * 1).toFixed(3) }}</td>
                <td v-if="i == 1" :rowspan="data.options.length + 1">{{ (item.fValue * 1).toFixed(3) }}</td>
                <td v-if="i == 1" :rowspan="data.options.length + 1">{{ (item.pValue * 1).toFixed(3) }}</td>
              </tr>
            </template>
          </tbody>
        </table>
      </div>
      <div class="chart-item">
        <table style="width: 100%">
          <thead>
            <tr>
              <th :colspan="7">方差分析结果(简化纵向格式)</th>
            </tr>
            <tr>
              <th>{{ data.title?.name }}(平均值±标准差)</th>
              <th v-for="(i, index) in data.items" :key="index">{{ i.name }}</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(item, index) in data.options" :key="index">
              <td>{{ item.optionDesc }}(n={{ item.frequency }})</td>
              <td v-for="(j, k) in data.items" :key="k">
                {{ (j.avgs[index] * 1).toFixed(2) }}±{{ (j.stds[index] * 1).toFixed(2) }}
              </td>
            </tr>
            <tr>
              <td>F</td>
              <td v-for="(j, k) in data.items" :key="k">{{ (j.fValue * 1).toFixed(3) }}</td>
            </tr>
            <tr>
              <td>p</td>
              <td v-for="(j, k) in data.items" :key="k">{{ (j.pValue * 1).toFixed(3) }}</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</template>

<script setup>
import { onMounted } from 'vue'
import LineChart from '../LineChart.vue'
import { chartOption } from '../chart'
const prop = defineProps({
  data: {
    type: String,
    default: ''
  }
})
const chartData = ref([])
onMounted(() => {
  const data = { ...prop.data }
  data.items.forEach((item) => {
    const params = {
      name: item.name,
      chartTitle: `${data.title?.name}和${item.name}的方差分析对比`,
      data: {
        xData: data.options.map((i) => i.optionDesc),
        data: [
          {
            name: item.name,
            data: item.avgs.map((item) => (item * 1).toFixed(2))
          }
        ]
      }
    }
    params.option = chartOption(params.data, params.chartTitle, 'baseLine')

    chartData.value.push(params)
  })
  const all = {
    name: '所有项',
    chartTitle: `${data.title?.name}和所有项的方差分析对比`,
    data: {
      xData: data.options.map((i) => i.optionDesc),
      data: chartData.value.map((item) => {
        return item.data.data[0]
      })
    }
  }
  all.option = chartOption(all.data, all.chartTitle, 'baseLine')
  chartData.value.push(all)
  console.log(chartData.value)
})
const handleStackLine = (index) => {
  chartData.value[index].option = chartOption(
    chartData.value[index].data,
    chartData.value[index].chartTitle,
    'stackLine'
  )
}
const handleBaseLine = (index) => {
  chartData.value[index].option = chartOption(
    chartData.value[index].data,
    chartData.value[index].chartTitle,
    'baseLine'
  )
}
</script>

<style lang="scss" scoped>
.chart-item {
  // border-bottom: 1px solid #ccc;
  padding-bottom: 10px;
  margin: 20px 0 40px 0;
  box-shadow: 0 0 10px #ccc;
  padding: 10px;
  border-radius: 5px;
}
.title {
  display: flex;
  justify-content: space-between;
  position: relative;
  padding: 20px;
  font-weight: 700;
  font-size: 20px;
  line-height: 30px;
  .tools {
    display: flex;
  }
  &::after {
    position: absolute;
    content: '';
    left: 0;
    top: 25px;
    height: 20px;
    width: 5px;
    background-color: #178aec;
  }
}
.chart {
  width: 100%;
  height: 400px;
}
.deep-analysis {
  padding: 10px 0;
}
table {
  /* width: 100%; */
  // border-bottom: 1px solid #000;
  // border-top: 1px solid #000;
  /* width: 1137px; */
  border-collapse: collapse;
  font-size: 14px;
  background-color: #fff;
  margin-bottom: 10px;
}

table tr {
  width: 100%;
  /* line-height: 35px; */
  height: 27px;
  /* height: 35px; */
  text-align: center;
}

table tr th {
  /* background: #fafafa; */
  color: #000;
  font-weight: 400;
  /* border: 1px solid #DDDDDD; */
  line-height: 30px;
  text-align: center;
  border-bottom: 1px solid;
}

table tr td {
  color: #000;
  /* border: 1px solid #DDDDDD; */
  /* border-bottom: 2px solid; */
}
</style>
